<template>
  <div class="data-manage">
    <common-Form
        :fieldsList="aaaField"
        :hideTable="false"
        :hideIndex="true"
        :table-head="firstTableHead"
        :hidePagination="false"
        ref="index_tableForm"
        :defaultData="defaultData"
        :tableHeight="200000"
        :isExpand="true"
        :tableUrl="'/list/index_list'"
    >
      <template v-slot:edit="scope" >
        <div>
          <span class="table-btn"
          @click="editFirstTable(scope.scope.row)"><i class="el-icon-edit-outline"></i></span>
        </div>

      </template>
      <template v-slot:formBtn>
        <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            @click="handleUpload"
            style="margin-left: 20px"
        >导入</el-button>
      </template>


    </common-Form>

    <common-Dialog ref="edit_first_table" :customClass="'edit_first_table-dialog'">
      <template v-slot:content>
        <common-Form
            :fieldsList="editDialogfieldsList"
            :hideTable="true"
            :hidePagination="true"
            ref="edit_tableForm"
        >

        </common-Form>
      </template>
      <template v-slot:footer>
        <div style="padding: 10px;">
          <el-button type="primary" @click.stop="editSubmit">保存修改</el-button>
        </div>
      </template>
    </common-Dialog>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="800px" append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import API from "@/api/index.api";
import _ from "lodash";
import * as request from '@/utils/request/request'
import api from "@/api/common.api";
import {uploadURL} from "@/utils/request/request";

export default {
  name: 'indexManage',
  components: {
    commonDialog,
    commonForm,
  },
  data () {
      return {
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          /*  headers: { Authorization: "Bearer " + getToken() },*/
          // 上传的地址
          url: request.uploadURL + "/index/upload"
        },
        editDialogfieldsList: [
          {
            type: 'text',
            code: 'data_num',
            name: '数据值'
          },
        ],
        aaaField: [
        ],
        firstTableHead: [
          {
            prop: 'id',
            label: '序号',

          },
          {
            prop: 'data_num',
            label: '数据值'
          },
          {
            prop: 'data_name',
            label: '数据列'
          },{
            prop: 'edit',
            label: '编辑'
          },
        ],
        defaultData: [
          {
            'id': '1',
            'data_num': '123',
            'data_name':'测试项'
          }]

      }
  },
  methods: {
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("上传成功");
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleUpload() {
      this.upload.title = "文件上传";
      this.upload.open = true;
    },

    editFirstTable (row) {
      this.editRow = _.cloneDeep(row)
      let t = _.find(this.editDialogfieldsList, {code: 'data_num'})
      t.value = row.data_num
      t.name = row.data_name
      this.$refs.edit_first_table.open({title: '编辑', width: '20%'})
    },

    editSubmit () {
      let v = this.$refs.edit_tableForm.form
      let params = {
        id: this.editRow.id,
        data_num: v.data_num,
      }
        api.index_edit(params).then(res=>{
          if(res.code === 200){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.$refs.edit_first_table.close()
            this.$refs.index_tableForm.getTableData()
          }else{
            this.$message({
              type: 'warning',
              message: res.message
            });
          }
        })
    },
  },
  mounted () {
    //this.getWarnList()
  }
}
</script>
<style lang="stylus" scoped>
  .data-manage{
    height: 100%;
    pointer-events: auto;
    .common-form-wrap {
      height: 100%;
    }
  }
  .table-btn{
      color: #3DE11D;
      font-size: 50px;
  }
  @media screen and (max-width: 1920px) {
      .table-btn{
          font-size: 20px!important;
      }

  }
</style>
